<template>
  <!-- 资讯列表页面 -->
  <div class="article">
    <!-- 头部内容 -->
    <div class="header">
      <!-- 状态输入框 -->
      <el-select v-model="articleStatus" clearable placeholder="请选择状态">
        <el-option label="未审核" value="未审核" />
        <el-option label="审核通过" value="审核通过" />
        <el-option label="审核不通过" value="审核不通过" />
        <el-option label="推荐" value="推荐" />
      </el-select>

      <!-- 标题输入框 -->
      <el-input
        v-model="articleTitle"
        style="width: 240px"
        placeholder="标题"
        clearable
      />

      <!-- 栏目输入框 -->
      <el-select v-model="articleCategory" clearable placeholder="请选择栏目">
        <el-option
          v-for="(item) in categoryList.filter(
            (item) => !item.parentId)"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <!-- 查询按钮 -->
      <el-button type="primary" @click="queryArticle">查询</el-button>

      <!-- 发布按钮 -->

      <el-button
        type="primary"
        style="position: absolute; right: 10px"
        @click="publishArticle"
      >发布风采</el-button>
    </div>

    <!-- 中间内容 -->
    <div class="main-content">
      <el-table
        :data="allArticleData"
        style="width: 100%"
        @row-click="publishComment"
      >
        <!-- 序号 -->
        <el-table-column type="index" label="序号" align="center" />

        <!-- 图片 -->
        <el-table-column prop="" label="封面" align="center">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.cover"
              fit="fill"
            />
          </template>
        </el-table-column>

        <!-- 风采 -->
        <el-table-column prop="" label="风采" align="left" width="500">
          <template slot-scope="scope">
            <div style="font-weight: bold">{{ scope.row.title }}</div>
            <div>
              {{
                scope.row.baseUser == null ? "" : scope.row.baseUser.realname==null?'':scope.row.baseUser.realname
              }}
            </div>
            <div>{{ scope.row.category==null?'': scope.row.category.name==null?'':scope.row.category.name }}</div>
            <div>{{ scope.row.publishTime | formatDate }}</div>
          </template>
        </el-table-column>

        <!-- 状态 -->
        <el-table-column prop="" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag
              size="mini"
              :type="
                scope.row.status == '审核通过'
                  ? 'success'
                  : scope.row.status == '审核不通过'
                    ? 'danger'
                    : scope.row.status == '推荐'
                      ? 'warning'
                      : 'info'
              "
            >{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="success"
              @click="recommendArticle(scope.row)"
            >
              推荐
            </el-button>

            <el-button
              size="small"
              type="warning"
              @click="examineContent(scope.row)"
            >审核</el-button>
            <el-button
              size="small"
              type="danger"
              @click="deleteArticle(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <br>
    <!-- 底部内容 -->
    <div class="footer">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[4, 8, 16, 24]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalPage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 审核  模态框 -->
    <el-dialog title="审核风采信息" :visible.sync="dialogVisible" width="60%">
      <!-- 内容 -->
      <div :model="ArticleContent">
        <!-- 标题 -->
        <div style="text-align: center; font-size: 18px; line-height: 2em">
          {{ ArticleContent.title }}
        </div>
        <!-- 主要内容 -->
        <div v-html="ArticleContent.content" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          type="danger"
          @click="changeStatus(ArticleContent.id, '审核不通过')"
        >审核不通过</el-button>
        <el-button
          type="success"
          @click="changeStatus(ArticleContent.id, '审核通过')"
        >审核通过</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { get, post } from '@/utils/request'
import { formatDate } from '@/api/date'
export default {
  filters: {
    // 把时间戳 转为日期格式
    formatDate(time) {
      var date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd')
    }
  },
  data() {
    return {
      // 跳转到 发表评论页面 标识符
      flad: 1,
      // 模态框 状态
      dialogVisible: false,
      // 文章状态
      articleStatus: '',
      // 文章标题
      articleTitle: '',
      // 文章栏目
      //
      categoryList: [],

      // 栏目编号
      articleCategory: '',
      // 全部文章数据
      allArticleData: [],

      // 每行 文章 数据
      ArticleContent: {},

      // 当前页码数
      currentPage: 1,
      // 每页显示的条数
      pageSize: 4,
      // 页面总条数
      totalPage: 0,

      // 查询 时 的参数
      queryParams: {}
    }
  },
  computed: {},
  created() {
    this.getAllArticle()

    this.getAllCategory()
  },
  mounted() {},
  methods: {

    // 跳转到 发表评论
    publishComment(row) {
      // console.log(row);
      // console.log(event);
      // console.log(column);

      if (this.flad == 1) {
        this.$router.push({
          path: '/admin/info/article/Details',
          query: {
            id: row.id
          }
        })
      }

      this.flad = 1
    },
    // 发布文章
    publishArticle() {
      this.$router.push({
        path: '/admin/info/article/Publish'
      })
    },

    // 底部  页码
    handleSizeChange(val) {
      this.currentPage = 1
      this.pageSize = val
      this.getAllArticle()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getAllArticle()
      console.log(`当前页: ${val}`)
    },

    // 根据 页码数 获取数据
    async getAllArticle() {
      const params = {
        page: this.currentPage,
        pageSize: this.pageSize
      }

      const res = await get('/article/pageQuery', {
        ...params,
        ...this.queryParams
      })
      // console.log(res);

      this.allArticleData = res.data.list
      console.log(this.allArticleData)

      this.totalPage = res.data.total
    },

    // 审核通过 审核不通过 按钮
    async changeStatus(id, status) {
      // console.log(id);
      // console.log(status);

      // 请求数据
      const data = await post('/article/changeStatus', {
        id: id,
        status: status
      })

      // 提示 信息
      if (data.status == 200) {
        this.$message({
          type: 'success',
          message: data.message
        })
      } else {
        this.$message({
          type: 'error',
          message: data.message
        })
      }

      // 关闭模态框
      this.dialogVisible = false
      // 重新加载全部数据
      this.getAllArticle()
    },

    // 审核内容
    examineContent(res) {
      this.flad = 0

      console.log(res)
      // 把当前行的数据 赋值给data里的 ArticleContent
      this.ArticleContent = { ...res }

      console.log(this.ArticleContent)
      // 打开模态框
      this.dialogVisible = true
    },
    // 删除文章
    async deleteArticle(res) {
      this.flad = 0
      let flag = 1
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          flag = 0
          const data = await get('/article/deleteById', { id: res.id })

          // console.log(data);
          if (data.status == 200) {
            this.$message({
              type: 'success',
              message: data.message
            })
          } else {
            this.$message({
              type: 'error',
              message: data.message
            })
          }

          // 重新加载全部数据
          this.getAllArticle()
        })
        .catch(() => {
          if (flag == 1) {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          }
        })
    },
    // 推荐 文章
    async recommendArticle(res) {
      this.flad = 0
      let flag = 1
      this.$confirm('宁确定要推荐此资讯吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          flag = 0
          const data = await post('/article/changeStatus', {
            id: res.id,
            status: '推荐'
          })

          // console.log(data);
          if (data.status == 200) {
            this.$message({
              type: 'success',
              message: data.message
            })
          } else {
            this.$message({
              type: 'error',
              message: data.message
            })
          }

          // 重新加载全部数据
          this.getAllArticle()
        })
        .catch(() => {
          if (flag == 1) {
            this.$message({
              type: 'info',
              message: '已取消推荐'
            })
          }
        })
    },
    // 查询文章方法
    queryArticle() {
      const params = {
        // 文章标题
        title: this.articleTitle,
        // 文章状态
        status: this.articleStatus,
        // 栏目编号
        categoryId: this.articleCategory
      }

      // 去掉 值为空 的 参数
      for (const key in params) {
        if (!params[key]) {
          delete params[key]
        }
      }

      this.currentPage = 1

      this.queryParams = params

      this.getAllArticle()
    },

    // 获取全部栏目
    async getAllCategory() {
      // 请求数据
      const res = await get('/category/findAll')
      this.categoryList = res.data
    }

    // //栏目列表
    // async filtersCategoryDate(){

    //    //请求数据
    //   let res = await get("/article/cascadeFindAll");
    //   console.log(res.data);

    //   var list = [];

    //   for(var i = 0; i < res.data.length; i++){

    //     if(list.indexOf(res.data[i].category.id) == -1){
    //       // console.log(res.data[i].category.id);
    //       list.push(res.data[i].category.id);
    //       this.categoryList.push(res.data[i]);
    //     }

    //   }

    //   console.log(this.categoryList);

    // },
  }
}
</script>
<style scoped>
.header {
  position: relative;
}

.article {
  position: relative;
  padding-bottom: 40px;
}
.article .footer {
  position: absolute;
  right: 20px;
}

.el-dialog__header {
  background: #2cb5ac;
}
.el-dialog__footer {
  border-top: 1px solid #2cb5ac;
}
</style>
